<template>
	<view class="code-container">
	  <!-- 新增批量操作区域 -->
	  <view class="action-bar">
		<button class="generate-btn" @click="addCode">
		  <uni-icons type="plus-filled" size="18" color="#fff"></uni-icons>
		  生成邀请码
		</button>
		<view class="statistics">
		  <text>已生成：{{codeList.length}}</text>
		  <text>未使用：{{unusedCount}}</text>
		</view>
	  </view>
  
	  <!-- 表格优化 -->
	  <view class="code-table">
		<!-- 表头 -->
		<view class="table-header">
		  <text class="header-cell">邀请码</text>
		  <text class="header-cell">用户ID</text>
		  <text class="header-cell">类型</text>
		</view>
  
		<!-- 数据行 -->
		<scroll-view scroll-y class="table-body">
		  <view 
			class="table-row"
			v-for="(item,index) in codeList"
			:key="index"
			@click="copyCode(item.invite_code)"
			:class="{'used-row': item.used_user_id}"
		  >
			<text class="code-col">{{item.invite_code}}</text>
			<text class="user-col">{{item.used_user_id || '未使用'}}</text>
			<view class="type-col">
			  <view class="type-tag" :class="item.vip_type">
				{{typeToText(item.vip_type)}}
			  </view>
			</view>
		  </view>
		</scroll-view>
	  </view>
	</view>
  </template>

<script>
	import {aiApi} from '/utils/api.js'
	export default {
		data() {
			return {
				codeList:[],
        page:1,
        pageSize:10,
			}
		},
    mounted() {
			this.getCodeList();
		},
    computed:{
      unusedCount(){
        return this.codeList.filter(item=>!item.used_user_id).length;
      }
    },

		methods: {
      typeToText(type){
        switch (type) {
          case 'month':return '月度会员';
          case 'year':return '年度会员';
          default:return '未知类型';
        }
      },
      copyCode(text){
        uni.setClipboardData({
          data: text,
          success: () => {
            uni.showToast({
              title: '复制成功',
              icon: 'none'
            });
          }
        });
      },
      async getCodeList(){
        const res = await aiApi.getInviteCodeList({page:this.page,pageSize:this.pageSize});
        this.codeList = res.data;
      },
			async addCode() {

        // 二次确认
        uni.showModal({
          title: '提示',
          content: '确定要生成新的邀请码吗？',
          success: async (resModal) => {
            if(resModal.confirm){
              const res = await aiApi.generateInviteCode();
              if(res.success){
                this.codeList = [{invite_code:res.data?.invite_code,id:res.data?.id}, ...this.codeList];
                this.getCodeList();
              }
            }
          }
        });
      }
		}
	}
</script>

<style scoped>
.code-container {
  padding: 30rpx;
  background: #f8f9fa;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.generate-btn {
  background: linear-gradient(45deg, #2b9939, #4cd964);
  color: #fff;
  border-radius: 10rpx;
  padding: 0 36rpx;
  font-size: 28rpx;
  box-shadow: 0 4rpx 12rpx rgba(43,153,57,0.2);
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.statistics {
  color: #909399;
  font-size: 26rpx;
  display: flex;
  gap: 20rpx;
}

.code-table {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
}

.table-header {
  display: grid;
  grid-template-columns: 3fr 1fr 1.5fr;
  padding: 28rpx;
  background: #f5f7fa;
  border-radius: 16rpx 16rpx 0 0;
}

.header-cell {
  font-size: 30rpx;
  color: #2b9939;
  font-weight: 500;
}

.table-body {
  max-height: 70vh;
}

.table-row {
  display: grid;
  grid-template-columns: 3fr 1fr 1.5fr;
  padding: 28rpx;
  border-bottom: 1rpx solid #eee;
  transition: all 0.2s ease;
}

.table-row:active {
  transform: scale(0.98);
  background: #f8f9fa;
}

.code-col {
  font-family: monospace;
  color: #2b9939;
  font-weight: 500;
}

.user-col {
  color: #606266;
}

.type-tag {
  display: inline-block;
  padding: 6rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.type-tag.month {
  background: #e8f5e9;
  color: #2b9939;
}

.type-tag.year {
  background: #fff6e6;
  color: #f0ad4e;
}

.used-row .code-col {
  color: #c0c4cc;
  text-decoration: line-through;
}

.used-row .type-tag {
  background: #f5f7fa;
  color: #909399;
}


.code-box {
  padding: 30rpx;
  background: #f8f9fa;
}

.add-code-btn {
  background: linear-gradient(45deg, #2b9939, #67c23a);
  color: #fff;
  border-radius: 50rpx;
  font-size: 28rpx;
  padding: 20rpx 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(43,153,57,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
}

.code-list-box {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
  padding: 20rpx;
}

.row-box {
  padding: 28rpx;
  border-radius: 12rpx;
  margin: 10rpx 0;
  background: #fff;
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: 20rpx;
  transition: all 0.2s ease;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.row-box:active {
  transform: scale(0.98);
  box-shadow: 0 1rpx 4rpx rgba(0,0,0,0.1);
}

.row-box:first-child {
  background: #f5f7fa;
  font-weight: 500;
  color: #2b9939;
}

/* 邀请码样式 */
.row-box view:first-child {
  font-family: monospace;
  font-weight: 500;
  color: #2b9939;
}

/* 过期时间状态 */
.row-box view:last-child {
  position: relative;
  padding-left: 30rpx;
}

.row-box view:last-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: #4cd964;
}

.row-box view:last-child[data-expired="true"]::before {
  background: #ff3b30;
}
</style>